<template>
  <div class="common-header" :class="headerType == 1 ? 'bg-none' : ''">
    <div class="header-box">
      <div class="logo" @click="goAddress('index')">
        <img :src="logo" alt srcset />
      </div>
      <div class="user" v-if="$route.meta.isUserCenter && isLogin">
        <div class="user-item" @click="goAddress('index')">回到首页</div>
        <div class="img-box">
          <img :src="userInfo.pic_url" v-if="userInfo.pic_url" />
          <img v-else src="@/assets/images/userCenter/header_img.png" />
        </div>
        <div class="user-name">
          {{ userInfo.phone }}
          <i class="el-icon-caret-bottom"></i>
          <div class="login-out">
            <i class="el-icon-caret-top"></i>
            <div class="login-out-list" @click="goAddress('change-password')">
              <i class="el-icon-setting"></i>修改密码
            </div>
            <div class="line"></div>
            <div class="login-out-list" @click="loginOut()">
              <i class="el-icon-switch-button"></i>退出登录
            </div>
          </div>
        </div>
      </div>
      <ul class="header-list" v-else>
        <li class="list-item list-item-news" :class="'index' == pathName ? 'active' : ''" @click="goAddress('index')">
          首页
        </li>
        <li class="list-item list-item-news">
          新闻资讯
          <i class="arrow el-icon-arrow-down"></i>
          <i class="arrow el-icon-arrow-up"></i>
          <div class="top-list">
            <div class="top-list-item" v-for="item in newsCategory" :key="item.id">
              <p @click="goNewsList(item)">{{ item.title }}</p>
            </div>
          </div>
        </li>
        <li class="list-item list-item-match">
          关于大会
          <i class="arrow el-icon-arrow-down"></i>
          <i class="arrow el-icon-arrow-up"></i>
          <div class="top-list">
            <div class="top-list-item" v-for="item in aboutMatchList" :key="item.id">
              <p @click="goMatchDetails(item.id)">{{ item.title }}</p>
            </div>
            <div class="top-list-item">
              <p @click="goAddress('works')">获奖作品</p>
            </div>
          </div>
        </li>
        <li class="list-item" :class="'vote' == pathName ? 'active' : ''">作品投票</li>
        <li class="list-item" :class="'contact-us' == pathName ? 'active' : ''" @click="goAddress('contact-us')">
          联系我们
        </li>
        <li @click="goAddress('user-center')" v-if="isLogin" id="userCenter">
          个人中心
        </li>
        <li v-else class="login-box">
          <div class="login" :class="pathName == 'login' ? 'active' : ''" @click="goAddress('login')">
            登录
          </div>
          |
          <div class="register" :class="pathName == 'register' ? 'active' : ''" @click="goAddress('register')">
            注册
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import {
    mapGetters,
    mapActions,
    mapMutations
  } from "vuex";
  export default {
    name: "CommonHeader",
    props: {
      pathName: {
        type: String,
        default () {
          return "";
        },
      },
      headerType: {
        type: Number,
        default () {
          return 2;
        },
      },
    },
    data() {
      return {
        logo: require("@/assets/images/logo.png"),
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.getUserInfo();
        this.getNewsCategory();
        this.getAboutMatchList();
      },
      ...mapActions([
        "getUserInfo",
        "getNewsCategory",
        "getAboutMatchList",
        "clearLogin",
      ]),
      logOut() {
        this.clearLogin().then((res) => {
          localStorage.removeItem("token");
          localStorage.removeItem('password_status');
          this.$router.push({
            name: "index",
          });
        });
      },
      goAddress(address) {
        this.$router.push({
          name: address,
        });
      },
      goNewsList(item) {
        this.$router.push({
          name: "news",
          query: {
            category_id: item.id,
            category_name: item.title,
          },
        });
      },
      goMatchDetails(id) {
        this.$router.push({
          name: "about-match",
          query: {
            id: id
          },
        });
      },
      loginOut() {
        this.clearLogin().then((res) => {
          this.$router.push({
            name: "index",
          });
        });
      },
    },
    computed: {
      ...mapGetters(["isLogin", "userInfo", "aboutMatchList", "newsCategory"]),
    },
  };
</script>
<style scoped>
  .common-header {
    width: 100%;
    height: 100px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0px 2px 5px 0px rgba(189, 189, 189, 0.1);
  }

  .bg-none {
    background: none;
  }

  .header-box {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
  }

  .logo img {
    width: 200px;
    margin-right: 200px;
  }

  .header-list {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin-left: 40px;
    color: #333;
    font-size: 16px;
    align-items: center;
  }

  .header-list .list-item {
    cursor: pointer;
    position: relative;
    height: 100px;
    line-height: 100px;
  }

  .list-item.active,
  .list-item:hover {
    color: #0b4696;
  }

  .login-box .active,
  .login-box div:hover {
    cursor: pointer;
  }

  .list-item.active::after,
  .list-item:hover::after {
    position: absolute;
    width: 30px;
    height: 2px;
    background: #0b4696;
    content: "";
    bottom: 20px;
    left: 50%;
    margin-left: -15px;
  }

  .login-box {
    display: flex;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    padding: 0 15px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    background: #0b4696;
    border-radius: 20px;
    text-align: center;
    color: #fff;
  }

  .login-box div {
    flex: 1;
  }

  .user {
    width: 50%;
    height: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }

  .user-item {
    font-size: 16px;
    color: #0b4696;
    margin-right: 10px;
    cursor: pointer;
  }

  .user .img-box img {
    width: 44px;
    height: 44px;
    margin-right: 5px;
    border-radius: 50%;
  }

  .user .user-name {
    font-size: 18px;
    color: #4a5162;
    height: 100px;
    line-height: 100px;
  }

  .user .user-name:hover {
    color: #0b4696;
    cursor: pointer;
  }

  .login-out {
    display: none;
    position: absolute;
    bottom: -120px;
    right: 0;
    background: #fff;
    width: 190px;
    height: 140px;
    box-shadow: 0px 0px 6px 0px rgba(174, 174, 174, 0.14);
    border-radius: 4px;
  }

  .login-out>>>.el-icon-caret-top {
    position: absolute;
    top: -35px;
    right: 5px;
    color: #fff;
    font-size: 60px;
  }

  .login-out-list {
    width: 190px;
    height: 52px;
    background: #fff;
    line-height: 52px;
    font-size: 18px;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #474e5f;
    cursor: pointer;
  }

  .login-out-list i {
    font-size: 24px;
    margin-right: 20px;
    display: inline-block;
  }

  .login-out .line {
    width: 150px;
    height: 1px;
    background: #dbdbdb;
    margin: 0 auto;
  }

  .login-out-list:hover {
    background: #f2f8ff;
    color: #0b4696;
  }

  .user .user-name:hover .login-out {
    display: block;
  }

  .list-item .arrow {
    font-size: 24px;
    color: #666;
    margin-left: 5px;
  }

  .list-item .el-icon-arrow-down {
    display: inline-block;
  }

  .list-item .el-icon-arrow-up {
    display: none;
  }

  .list-item:hover .el-icon-arrow-down {
    display: none;
  }

  .list-item:hover .el-icon-arrow-up {
    color: #0b4696;
    display: inline-block;
  }

  .top-list {
    display: none;
    width: 160px;
    position: absolute;
    top: 90px;
    left: -30px;
    text-align: center;
    box-shadow: 0px 0px 6px 0px rgba(174, 174, 174, 0.14);
    border-radius: 4px;
  }

  .list-item:hover .top-list {
    display: block;
  }

  .top-list-item {
    width: 160px;
    height: 52px;
    background: #fff;
    font-size: 18px;
    box-sizing: border-box;
    padding: 8px 0;
    color: #474e5f;
    cursor: pointer;
    position: relative;
  }

  .top-list-item p {
    width: 160px;
    height: 36px;
    line-height: 36px;
    background: #fff;
  }

  .top-list-item::after {
    position: absolute;
    bottom: 0;
    left: 15px;
    content: "";
    width: 130px;
    height: 1px;
    background: #dbdbdb;
  }

  .top-list-item:nth-last-of-type(1)::after {
    width: 130px;
    height: 0;
  }

  .top-list-item:hover p {
    background: #f2f8ff;
    color: #0b4696;
  }

  #userCenter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #ffffff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 24px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    background: #0b4696;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    Text-decoration: none;
    cursor: pointer;
  }

  #userCenter .active,
  #userCenter .hover {
    cursor: pointer;
  }
</style>